<template>
  <div class="bordereaux-container">
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="bordereaux-card">
          <div class="flex flex_bet">
            <div><i class="iconfont iconfangwenrenshu"></i></div>
            <div>
              <count-to :start-val="0" :end-val="visitorVolume" :duration="1000" class="card-panel-num" />次
              <h5>平台访问量</h5>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="bordereaux-card">
          <div class="flex flex_bet">
            <div><i class="iconfont iconzhuce"></i></div>
            <div>
              <count-to :start-val="0" :end-val="newUserVolume" :duration="1000" class="card-panel-num" />次
              <h5>新增注册用户</h5>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="bordereaux-card">
          <div class="flex flex_bet">
            <div><i class="iconfont iconzhuce"></i></div>
            <div>
              <count-to :start-val="0" :end-val="addLoginVolume" :duration="1000" class="card-panel-num" />次
              <h5>累计注册用户</h5>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="bordereaux-card">
          <div class="flex flex_bet">
            <div><i class="iconfont icondenglu"></i></div>
            <div>
              <count-to :start-val="0" :end-val="loginUserVolume" :duration="1000" class="card-panel-num" />次
              <h5>今日登陆用户</h5>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="bordereaux-card">
          <div class="flex flex_bet">
            <div><i class="iconfont iconzuihuoyueyonghu"></i></div>
            <div>
              <count-to :start-val="0" :end-val="activeUserVolume" :duration="1000" class="card-panel-num" />
              <h5>活跃用户</h5>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="bordereaux-card">
          <div class="flex flex_bet">
            <div><i class="iconfont iconfeihuoyuedu"></i></div>
            <div>
              <count-to :start-val="0" :end-val="lazyUserVolume" :duration="1000" class="card-panel-num" />
              <h5>非活跃用户</h5>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="bordereaux-card">
          <div class="flex flex_bet">
            <div><i class="iconfont iconliucun"></i></div>
            <div>
              <count-to :start-val="0" :end-val="leaveVolume" :duration="1000" class="card-panel-num" />
              <h5>留存用户</h5>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="bordereaux-card">
          <div class="flex flex_bet">
            <div><i class="iconfont iconchaojihuiyuanxianxing"></i></div>
            <div>
              <count-to :start-val="0" :end-val="0" :duration="1000" class="card-panel-num" />
              <h5>明星用户</h5>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="font-size:14px" :gutter="32">
      <el-col :xs="32" style="padding:0;">
        <div style="margin:0 15px;;overflow: hidden" class="sbs">
          <p style="padding:0 10px 0 10px;font-weight: bold;text-align:center;"><i class="iconfont iconAPItiaoyongcishu"></i> 核心功能调用次数</p>
          <bolumnar :chartData="lineChartData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
<script>
import { getUservisit, todayRegisterSum, addRegisterSum, todayLoginNum, ActiveThreeNum, visitTenNum, livePercentNum } from "@/api/bordereaux.js";
import CountTo from 'vue-count-to'
import Bolumnar from '../components/Bolumnar'
export default {
  components: { CountTo, Bolumnar },
  data() {
    return {
      visitorVolume: 0,
      newUserVolume: 0,
      addLoginVolume: 0,
      loginUserVolume: 0,
      activeUserVolume: 0,
      lazyUserVolume: 0,
      leaveVolume: 0,
      lineChartData: { expectedData: [0, 0, 0, 0] },
    }
  },
  created() {
    this.getUservisits()
    this.gettodayRegisterSum()
    this.getaddRegisterSum()
    this.gettodayLoginNum()
    this.getActiveThreeNum()
    this.getvisitTenNum()
    this.getlivePercentNum()
  },
  methods: {
    //平台访问量
    getUservisits() {
      getUservisit().then(res => { this.visitorVolume = res.data }).catch(err => { this.visitorVolume = 0 })
    },
    //新增注册用户
    gettodayRegisterSum() {
      todayRegisterSum().then(res => { this.newUserVolume = res.data }).catch(err => { this.newUserVolume = 0 })
    },
    //累计注册用户
    getaddRegisterSum() {
      addRegisterSum().then(res => { this.addLoginVolume = res.data }).catch(err => { this.addLoginVolume = 0 })
    },
    //今日登陆用户
    gettodayLoginNum() {
      todayLoginNum().then(res => { this.loginUserVolume = res.data }).catch(err => { this.loginUserVolume = 0 })
    },
    //活跃用户
    getActiveThreeNum() {
      ActiveThreeNum().then(res => { this.activeUserVolume = res.data }).catch(err => { this.activeUserVolume = 0 })
    },
    //非活跃用户
    getvisitTenNum() {
      visitTenNum().then(res => { this.lazyUserVolume = res.data }).catch(err => { this.lazyUserVolume = 0 })
    },
    //留存用户
    getlivePercentNum() {
      livePercentNum().then(res => { this.leaveVolume = res.data }).catch(err => { this.leaveVolume = 0 })
    }
  }
}
</script>

<style lang="scss" scoped>
.bordereaux-container {
  margin: 0 !important;
  font-family: 微软雅黑, MicrosoftYahei, sans-serif;
  color: #fff;
  background-color: #253138;
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100vh;
  padding: 32px;
}
.sbs {
  // background: url(../../../assets/images/amiddboxtbott1.png);
  background-color: #2f3e47;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
  box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  background-clip: padding-box;
}
.panel-group {
  .card-panel-col {
    margin-bottom: 32px;
    text-align: center;
    .bordereaux-card {
      padding: 30px;
      background-color: #2f3e47;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: top;
      box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06),
        0 1px 0px 0 rgba(0, 0, 0, 0.02);
      border-radius: 5px;
      background-clip: padding-box;
      h5 {
        font-size: 16px;
        margin: 0;
        margin-top: 9px;
      }
      i {
        font-size: 48px;
      }
    }
  }
  .card-panel-num {
    font-size: 20px;
  }
}
</style>